@import '../../base/index';
html,
body {
  display: block;
  height: 100%;
  width: 100%;
  background-color: #fff;
}
div {
  box-sizing: border-box;
}
a:hover {
  color: #28c0c6 !important;
  text-decoration: underline;
}
// 背景
@mixin coverBg($img) {
  background: url($img) no-repeat center;
  background-size: 100%;
  background-position: center center;
}
.container {
  width: 1000px;
  margin: 0 auto;
}
.public-top {
  width: 1000px;
  height: 98px;
  display: flex;
  align-items: center;
  margin: 0 auto;
  justify-content: space-between;
  .logo {
    width: 115px;
    height: 54px;
  }
  .login-out {
    font-size: 20px;
    color: #666666;
  }
  .login-out:hover {
    text-decoration: none;
  }
}
.public-bg {
  width: 100%;
  height: 173px;
  @include coverBg('../images/public.jpg');
  background-size: 100% 100%;
  .container {
    display: flex;
    justify-content: space-between;
    padding-top: 32px;
    .index-pic {
      margin-left: -58px;
      margin-top: 21px;
    }
  }
}
.public-bottom {
    width: 100%;
    height: 344px;
    background-color: #e7e7e7;
    .container {
      height: 100%;
      position: relative;
    }
    a {
      display: block;
    }
    .close {
      position: absolute;
      top: -60px;
      left: 50%;
      margin-left: -60px;
      width: 119px;
      height: 119px;
      background-color: #e7e7e7;
      border-radius: 50%;
      display: flex;
      // justify-content: center;
      padding-top: 30px;
      flex-direction: column;
      img {
        width: 46px;
        height: 46px;
        margin: 0 auto;
        display: block;
      }
      .text {
        font-size: 14px;
        color:#ec7332;
        text-align: center;
        margin-top: 10px;
        display: none;
      }

    }
    .close:hover {
      .text {
        display: block;
      }
    }
    .text-box {
      display: flex;
      justify-content: space-around;
      padding-top:73px;
      .top {
        font-size: 20px;
        color: 1a1a1a;
        padding-bottom: 13px;
      }
      .text {
        font-size: 20px;
        color: #666666;
        margin-top: 17px;
      }
    }
}
//登录 
.login {
  width: 100%;
  height: 1080px;
  @include coverBg('../images/bg.jpg');
  background-size: 100% 100%;
  .bg {
    width: 100%;
    height: 100%;
    padding-top: 198px;
    .logo {
      width: 200px;
      height: 55px;
      display: block;
      margin: 0 auto;
    }
    .form {
      @include coverBg('../images/form-bg.png');
      width: 559px;
      height: 407px;
      background-size: 100% 100%;
      margin: 78px auto 0 auto;
      padding: 130px 0 0 178px;
      .input {
        width: 280px;
        height: 38px;
        background: none;
        color: #ffffff;
        padding-left: 15px;
        border: none;
        outline: none;
      }
      .text {
        @include coverBg('../images/text-bg.png');
        background-size: 100% 100%;
        width: 180px;
        height: 44px;
        margin: 99px 0 0 27px;
        text-align: center;
        line-height: 44px;
        font-size: 20px;
        color:#ffffff;
      }
    }
    .bottom {
      width: 100%;
      height: 100px;
      background-color: rgba(8, 19, 56, 0.5);
      margin-top: 190px;
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        a {
          font-size: 20px;
          color:#ffffff;
        }
        .line {
          width: 1px;
          height: 22px;
          margin: 0 40px;
          background-color: #fff;
        }
      }
    }
  }
}
// 首页
.index{
  .cont {
    width: 100%;
    height: 740px;
    .container {
      height: 100%;
      padding-top: 191px;
      .router{
        width: 552px;
        height: 194px;
        // @include coverBg('../images/pic.jpg');
        margin: 0 auto;
        background-size: 100% 100%;
        position: relative;
        display: flex;
        margin-left: 260px;
        .mid {
          display: flex;
          flex-direction: column;
          margin: 0 40px;
        }
        .gomore {
          text-decoration: none;
        }
        .gomore {
          position: relative;
          .text3 {
            position: absolute;
            top: 36px;
            left: 36px;
            width: 50px;
            text-align: center;
            font-size: 38px;
            color: #595959;
            font-weight: 500;
            span {
              font-size: 16px;
              padding-left: 5px;
            }
          }
        }
        .name {
          text-align: center;
          font-size: 16px;
          color: #756972;
        }
        .text {
          font-size: 16px;
          color:#7f7fa6;
          text-align: center;
          padding-left: 12px;
        }
        .text1 {
          font-size: 16px;
          color:#7f7fa6;
          text-align: center;
          padding-left: 8px;
        }
        
      }
    }
    .time {
      display: flex;
      justify-content: center;
      margin-top: 56px;
      height: auto;
      .item {
        height: 80px;
        text-align: center;
        border-right: 1px solid rgba(51, 51, 51, 0.3);
        padding-top: 9px;
        padding-right: 41px;
        padding-left: 50px;
        .text {
          font-size: 21px;
          color: #666666;
          font-weight: bold;
        }
        .text1 {
          margin-top: 18px;
          font-size:21px;
          color: rgba(102, 102, 102, 0.8);
        }
      }
      .item:last-child{
        border: none;
      }
    }
  }
}
// 终端管理
.zdgl {
  .cont{
    padding: 190px 0 172px 0;
    .content {
      width: 100%;
      padding-bottom: 125px;
      background-color: #f7f7f7;
      border-radius: 10px;
      border: solid 1px #bfbfbf;
    }
    .top {
      height: 45px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 7px;
      background-color: #e9e9e9;
      border-radius: 10px 10px 0 0;
      border-bottom: 1px solid #bfbfbf;
      .left {
        color: #262626;
        font-size: 17px;
        width: 580px;
        padding-left: 33px;
        border-right:1px solid #bfbfbf;
        height: 100%;
        display: flex;
        align-items: center;
      }
      .right {
        display: flex;
        align-items: center;
        height: 100%;
        .text {
          font-size:17px;
          color: #262626;
          margin-right: 24px;
        }
        .text1 {
          font-size: 12px;
          color:#262626;
          margin-right: 7px;
        }
        .fang {
          width: 11px;
          height: 11px;
          margin-right: 8px;
        }
        .gray {
          background-color: #aaaaaa;
        }
        .green {
          background-color: #27f536;
        }
        .red {
          background-color: #fa0303;
        }
      }
    }
    .item {
      height: 182px;
      width: 100%;
      display: flex;
      border-bottom: 1px solid #bfbfbf;
      .left {
        width: 580px;
        padding-left: 9px;
        border-right:1px solid #bfbfbf;
        padding-top: 18px;
        height: 180px;
        display: flex;
        .img {
          width: 129px;
          height: 144px;
          display: flex;
          justify-content: center;
          padding-top: 20px;
          img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
          }
        }
        .mid {
          margin-left: 19px;
          .mid-top {
            display: flex;
            margin-bottom: 5px;
            align-items: center;
          }
          .input {
            font-size: 17px;
            color: #28c0c6;
            border-radius: 15px;
            border: none;
            background:none;
            width: 130px;
            &.active {
              padding-left: 15px;
              height: 30px;
              border: 1px solid #666666;
              background-color: #fff;
            } 
          }
          .text {
            font-size: 17px;
            color: #28c0c6;
            margin-right: 19px;
            margin-top: 2px;
          }
          .mid-img {
            margin-right: 15px;
            width: 20px;
            height: 20px;
            @include coverBg('../images/bj.png');
            background-size: 100% 100%;
            margin-left: 5px;
          }
          .mid-img:hover {
            cursor: pointer;
            @include coverBg('../images/bj1.png');
          }
          .del {
            width: 20px;
            height: 20px;
            @include coverBg('../images/del.png');
            background-size: 100% 100%;
          }
          .del:hover {
            @include coverBg('../images/del1.png');
            cursor: pointer;
          }
        }
        .mid-text {
          font-size: 17px;
          line-height: 29px;
          color: #666666;
        }
        .right {
          margin-left: 40px;
          margin-top: 46px;
        }
      }
    }
    .mid-line {
      width: 100%;
      height: 60px;
      background-color: #e9e9e9;
      display: flex;
      align-items: center;
      .text {
        color: #262626;
        font-size: 17px;
        padding-left: 33px;
      }
    }
  }
}
// 更多
.more {
  .cont {
    padding: 131px 0 148px 0;
    .container {
      height: 1301px;
      background-color: #ffffff;
      border-radius: 10px;
      border: solid 1px #bfbfbf;
      display: flex;
      .left {
        width: 254px;
        height: 100%;
        border-right: 1px solid #bfbfbf;
        background-color: #f2f2f2;
        border-radius: 10px 0 0 10px;
        .item {
          width: 100%;
          height: 90px;
          padding-left: 38px;
          display: flex;
          justify-content: space-between;
          padding-right: 20px;
          align-items: center;
          font-size: 20px;
          letter-spacing: 1px;
          color: #666666;
          &.active {
            background-color: #28c0c6;
            color: #ffffff;
          }
        }
        .item:first-child {
          border-radius: 10px 0 0 0 ;
        }
      }
      .right2,.right3 {
        display: none;
      }
      .right1 {
        width: 745px;
        padding:41px 49px 0 46px;
        height: 100%;
        // overflow-y: scroll;
        .tit {
          padding-left: 13px;
          font-size: 26px;
          letter-spacing: 1px;
          color: #666666;
        }
        .look {
          margin-top: 46px;
          padding-left: 13px;
          font-size: 16px;
          letter-spacing: 1px;
          color: #666666;
          padding-bottom: 40px;
        }
        .right-item {
          margin-top: 49px;
          .title {
            padding-left: 13px;
            font-size: 18px;
            letter-spacing: 1px;
            color: #1a1a1a;
          }
          .line {
            width: 100%;
            height: 1px;
            background-color: #cccccc;
            margin-top: 22px;
            margin-bottom: 30px;
          }
          .text {
            font-size: 14px;
            line-height: 40px;
            letter-spacing: 0px;
            color: #666666;
            padding-left: 100px;
            span {
              padding-left: 30px;
            }
          }
        }
      }
      .right2 {
        width: 745px;
        height: 100%;
        .tit {
          font-size: 26px;
          letter-spacing: 1px;
          color: #666666;
          padding: 42px 0 0 59px;
        }
        .title {
          font-size: 16px;
          letter-spacing: 1px;
          color: #666666;
          padding-left: 59px;
          margin-top: 48px;
        }
        .line {
          width: 100%;
          height: 1px;
          margin-top: 80px;
          background-color: #cccccc;
        }
        .ip-box {
          margin-top: 46px;
          padding-left: 155px;
          .item {
            display: flex;
            align-items: center;
            .text {
              font-size: 15px;
	            color: #666666;
            }
            .input {
              width: 258px;
              height: 31px;
              border-radius: 15px;
              border: solid 1px #bfbfbf;
              font-size: 15px;
              color: #666666;
              margin-left: 25px;
              padding-left: 15px;
            }
          }
          .item1{
            margin-top: 40px;
          }
        }
        .save {
          width: 210px;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 16px;
          color:#333333;
          border-radius: 10px;
          margin: 220px auto 0 auto;
          border:1px solid #cccccc;
        }
        .save:hover {
          background-color: #28c0c6;
          color: #ffffff;
          cursor: pointer;
          border: none;
        }
      }
      .right3 {
        width: 745px;
        height: 100%;
        .tit {
          font-size: 26px;
          letter-spacing: 1px;
          color: #666666;
          padding: 42px 0 0 59px;
        }
        .title {
          font-size: 16px;
          letter-spacing: 1px;
          color: #666666;
          padding-left: 59px;
          margin-top: 48px;
          width: 618px;
        }
        .help {
          margin-top: 40px;
          padding-left: 59px;
        }
        .line {
          width: 100%;
          height: 1px;
          margin-top: 15px;
          background-color: #cccccc;
        }
        .form {
          padding-top: 40px;
          padding-left: 187px;
          .item {
            margin-top: 24px;
            display: flex;
            .text {
              font-size: 15px;
              color: #666666;
              width: 80px;
              text-align: right;
            }
            .input {
              width: 258px;
              height: 31px;
              border-radius: 15px;
              border: solid 1px #bfbfbf;
              font-size: 15px;
              color: #666666;
              margin-left: 25px;
              padding-left: 15px;
            }
          }
        }
        .save {
          width: 210px;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 16px;
          color:#333333;
          border-radius: 10px;
          margin: 70px 0 0 309px;
          border:1px solid #cccccc;
        }
        .save:hover {
          background-color: #28c0c6;
          color: #ffffff;
          cursor: pointer;
          border: none;
        }
      }
    }
  }
}
.switch {
  width: 38px;
  height: 20px;
  border-radius: 30px;
  overflow: hidden;
  vertical-align: middle;
  position: relative;
  display: inline-block;
  background: #ccc;
  box-shadow: 0 0 1px #3fc0c5;
  margin-left: 22px;
}

.switch input {
  visibility: hidden;
}

.switch span {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: #fff;
  width: 50%;
  height: 100%;
  transition: all linear 0.2s;
}

.switch span::before {
  position: absolute;
  top: 0;
  left: -100%;
  content: '';
  width: 200%;
  height: 100%;
  border-radius: 30px;
  background: #3fc0c5;
}

.switch span::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
}

.switch input:checked+span {
  transform: translateX(100%);
}
